<template>
  <div>
    
    <section class="container">
      <!-- 左容器 -->
      <div class="itemLeft">
        <ItemPage>
          <TotalSale></TotalSale>
        </ItemPage>
        <ItemPage>
          <ProductCategory></ProductCategory>
        </ItemPage>
      </div>
      <!-- 中容器 -->
      <div class="itemCenter">
        <ItemMap></ItemMap>
      </div>
      <!-- 右容器 -->
      <div class="itemRight">
        <ItemPage>
          <WeeklySale></WeeklySale>
        </ItemPage>
        <ItemPage>
          <ItemInventory></ItemInventory>
        </ItemPage>
      </div>
    </section>
  </div>
</template>

<script>
import ItemInventory from '@/components/home/ItemInventory.vue'
import ItemMap from '@/components/home/ItemMap.vue'
import ItemPage from '@/components/home/ItemPage.vue'
import ProductCategory from '@/components/home/ProductCategory.vue'
import TotalSale from '@/components/home/TotalSale.vue'
import WeeklySale from '@/components/home/WeeklySale.vue'
export default {
  components: {
    ItemPage, TotalSale, WeeklySale, ProductCategory, ItemInventory, ItemMap
  }
}
</script>

<style lang="less" scoped>


.container {
  // 最大最小宽度
  min-width: 1200px;
  max-width: 2048px;
  margin: 0 auto;
  // background-color: pink;
  padding: .125rem .125rem 0;
  display: flex;
  

  //设置左右在主体的份数
  .itemLeft,
  .itemRight {
    flex: 3;
  }

  .itemCenter {
    flex: 5;
    height: 13.25rem;
    background-color: rgba(76, 76, 251, 0.2);
    padding: .125rem;
    margin: .25rem;
    border-radius: .1875rem;
  }
}
</style>